



<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#FFF">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">

<link rel="icon" type="image/ico" sizes="32x32" href="/images/favicon.ico">
  <meta http-equiv="Cache-Control" content="no-transform">
  <meta http-equiv="Cache-Control" content="no-siteapp">


<link rel="alternate" type="application/rss+xml" title="逸尘" href="https://yichenm.github.io.git/rss.xml" />
<link rel="alternate" type="application/atom+xml" title="逸尘" href="https://yichenm.github.io.git/atom.xml" />
<link rel="alternate" type="application/json" title="逸尘" href="https://yichenm.github.io.git/feed.json" />

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Mulish:300,300italic,400,400italic,700,700italic%7CFredericka%20the%20Great:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20JP:300,300italic,400,400italic,700,700italic%7CNoto%20Serif%20SC:300,300italic,400,400italic,700,700italic%7CInconsolata:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext">

<link rel="stylesheet" href="/css/app.css?v=0.2.5">

  
  <meta name="keywords" content="Hexo,教程" />


<link rel="canonical" href="https://yichenm.github.io.git/2020/08/13/computer-science/note/theme-shoka-doc/display/">


<meta name="description" content="🚀快速开始 - 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能  # 首页置顶文章 在文章的 Front Matter 设置 sticky: true ，则该文章将显示在首页最上方的 置顶文章 列。 多篇文章按照发布时间倒序排列，不分页。 ---title: 置顶文章sticky: true---# 首页精选分类 想要在首页显示分类翻转块，需要按照以下示例的方式，给需要显示">
<meta property="og:type" content="article">
<meta property="og:title" content="Step.3 界面显示">
<meta property="og:url" content="https://yichenm.github.io.git/2020/08/13/computer-science/note/theme-shoka-doc/display/index.html">
<meta property="og:site_name" content="逸尘">
<meta property="og:description" content="🚀快速开始 - 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能  # 首页置顶文章 在文章的 Front Matter 设置 sticky: true ，则该文章将显示在首页最上方的 置顶文章 列。 多篇文章按照发布时间倒序排列，不分页。 ---title: 置顶文章sticky: true---# 首页精选分类 想要在首页显示分类翻转块，需要按照以下示例的方式，给需要显示">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg">
<meta property="og:image" content="https://tva3.sinaimg.cn/large/6833939bly1giclfdu6exj20zk0m87hw.jpg">
<meta property="og:image" content="https://tva3.sinaimg.cn/large/6833939bly1giclflwv2aj20zk0m84qp.jpg">
<meta property="og:image" content="https://tva3.sinaimg.cn/large/6833939bly1giclg5ms2rj20zk0m8u0x.jpg">
<meta property="og:image" content="https://tva3.sinaimg.cn/large/6833939bly1giclhnx9glj20zk0m8npd.jpg">
<meta property="og:image" content="https://tva3.sinaimg.cn/large/6833939bly1gicitht3xtj20zk0m8k5v.jpg">
<meta property="og:image" content="https://tva3.sinaimg.cn/large/6833939bly1giclil3m4ej20zk0m8tn8.jpg">
<meta property="og:image" content="https://tva3.sinaimg.cn/large/6833939bly1gicljgocqbj20zk0m8e81.jpg">
<meta property="og:image" content="https://tva3.sinaimg.cn/large/6833939bly1gipetfk5zwj20zk0m8e81.jpg">
<meta property="article:published_time" content="2020-08-13T13:12:48.000Z">
<meta property="article:modified_time" content="2020-11-10T20:12:45.000Z">
<meta property="article:author" content="逸尘">
<meta property="article:tag" content="Hexo">
<meta property="article:tag" content="教程">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg">


  <title>
Step.3 界面显示 - Theme Shoka Documentation - 二进制杂谈 - 计算机科学 |
Yi Chen = 逸尘 = 逸尘の博客</title>
<meta name="generator" content="Hexo 5.4.0"></head>
<body itemscope itemtype="http://schema.org/WebPage">
  <div id="loading">
    <div class="cat">
      <div class="body"></div>
      <div class="head">
        <div class="face"></div>
      </div>
      <div class="foot">
        <div class="tummy-end"></div>
        <div class="bottom"></div>
        <div class="legs left"></div>
        <div class="legs right"></div>
      </div>
      <div class="paw">
        <div class="hands left"></div>
        <div class="hands right"></div>
      </div>
    </div>
  </div>
  <div id="container">
    <header id="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="inner">
        <div id="brand">
          <div class="pjax">
          
  <h1 itemprop="name headline">Step.3 界面显示
  </h1>
  
<div class="meta">
  <span class="item" title="创建时间：2020-08-13 21:12:48">
    <span class="icon">
      <i class="ic i-calendar"></i>
    </span>
    <span class="text">发表于</span>
    <time itemprop="dateCreated datePublished" datetime="2020-08-13T21:12:48+08:00">2020-08-13</time>
  </span>
</div>


          </div>
        </div>
        <nav id="nav">
  <div class="inner">
    <div class="toggle">
      <div class="lines" aria-label="切换导航栏">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
      </div>
    </div>
    <ul class="menu">
      <li class="item title"><a href="/" rel="start">Yi Chen</a></li>
    </ul>
    <ul class="right">
      <li class="item theme">
        <i class="ic i-sun"></i>
      </li>
      <li class="item search">
        <i class="ic i-search"></i>
      </li>
    </ul>
  </div>
</nav>

      </div>
      <div id="imgs" class="pjax">
        <ul>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1gicitcxhpij20zk0m8hdt.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1giclize41wj20zk0m87gk.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1gipey0a334j20zk0m8qpt.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1giph4lm9i7j20zk0m84qp.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1gipew28b65j20zk0m8hdt.jpg"></li>
          <li class="item" data-background-image="https://tva1.sinaimg.cn/large/6833939bly1gipeybxm1pj20zk0m8niv.jpg"></li>
        </ul>
      </div>
    </header>
    <div id="waves">
      <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <defs>
          <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" />
          <use xlink:href="#gentle-wave" x="48" y="3" />
          <use xlink:href="#gentle-wave" x="48" y="5" />
          <use xlink:href="#gentle-wave" x="48" y="7" />
        </g>
      </svg>
    </div>
    <main>
      <div class="inner">
        <div id="main" class="pjax">
          
  <div class="article wrap">
    
<div class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<i class="ic i-home"></i>
<span><a href="/">首页</a></span><i class="ic i-angle-right"></i>
<span  itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/computer-science/" itemprop="item" rel="index" title="分类于 计算机科学"><span itemprop="name">计算机科学</span></a>
<meta itemprop="position" content="1" /></span>
<i class="ic i-angle-right"></i>
<span  itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/computer-science/note/" itemprop="item" rel="index" title="分类于 二进制杂谈"><span itemprop="name">二进制杂谈</span></a>
<meta itemprop="position" content="2" /></span>
<i class="ic i-angle-right"></i>
<span  class="current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/categories/computer-science/note/Theme-Shoka-Documentation/" itemprop="item" rel="index" title="分类于 Theme Shoka Documentation"><span itemprop="name">Theme Shoka Documentation</span></a>
<meta itemprop="position" content="3" /></span>
</div>

    <article itemscope itemtype="http://schema.org/Article" class="post block" lang="zh-CN">
  <link itemprop="mainEntityOfPage" href="https://yichenm.github.io.git/2020/08/13/computer-science/note/theme-shoka-doc/display/">

  <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
    <meta itemprop="image" content="/images/avatar.jpg">
    <meta itemprop="name" content="逸尘">
    <meta itemprop="description" content="逸尘の博客, 专注于编程,分享生活,分享知识">
  </span>

  <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
    <meta itemprop="name" content="逸尘">
  </span>

  <div class="body md" itemprop="articleBody">
    

    <div class="note primary">
<p><a href="/computer-science/note/theme-shoka-doc/">🚀快速开始</a> - <a href="/computer-science/note/theme-shoka-doc/dependents/">💌依赖插件</a> - <a href="/computer-science/note/theme-shoka-doc/config/">📌基本配置</a> - <a href="/computer-science/note/theme-shoka-doc/display/"><strong>🌈界面显示</strong></a> - <a href="/computer-science/note/theme-shoka-doc/special/">🦄特殊功能</a></p>
</div>
<h1 id="首页置顶文章"><a class="anchor" href="#首页置顶文章">#</a> 首页置顶文章</h1>
<p>在文章的 Front Matter 设置 <code>sticky: true</code> ，则该文章将显示在首页最上方的 <code>置顶文章</code> 列。<br />
多篇文章按照发布时间倒序排列，不分页。</p>
<figure class="highlight raw"><figcaption data-lang=""></figcaption><table><tr><td data-num="1"></td><td><pre>---</pre></td></tr><tr><td data-num="2"></td><td><pre>title: 置顶文章</pre></td></tr><tr><td data-num="3"></td><td><pre>sticky: true</pre></td></tr><tr><td data-num="4"></td><td><pre>---</pre></td></tr></table></figure><h1 id="首页精选分类"><a class="anchor" href="#首页精选分类">#</a> 首页精选分类</h1>
<p>想要在首页显示分类翻转块，需要按照以下示例的方式，给需要显示的分类加上封面图。</p>
<ol>
<li>
<p>首先，修改站点配置：<br />
找到 <code>category_map:</code> ，配置每个分类对应的英文映射，比如：</p>
<figure class="highlight yml"><figcaption data-lang="YAML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">category_map</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="2"></td><td><pre>  <span class="token key atrule">计算机科学</span><span class="token punctuation">:</span> computer<span class="token punctuation">-</span>science</pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token key atrule">Java</span><span class="token punctuation">:</span> java</pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token key atrule">C++</span><span class="token punctuation">:</span> cpp</pre></td></tr><tr><td data-num="5"></td><td><pre>  <span class="token key atrule">二进制杂谈</span><span class="token punctuation">:</span> note</pre></td></tr><tr><td data-num="6"></td><td><pre>  <span class="token key atrule">计算机程序设计（C++）-西安交通大学</span><span class="token punctuation">:</span> course<span class="token punctuation">-</span><span class="token number">1</span></pre></td></tr><tr><td data-num="7"></td><td><pre>  <span class="token key atrule">零基础学Java语言-浙江大学-翁恺</span><span class="token punctuation">:</span> course<span class="token punctuation">-</span><span class="token number">1</span></pre></td></tr><tr><td data-num="8"></td><td><pre>  <span class="token key atrule">面向对象程序设计-Java语言-浙江大学-翁恺</span><span class="token punctuation">:</span> course<span class="token punctuation">-</span><span class="token number">2</span></pre></td></tr></table></figure><blockquote>
<p>注意：hexo 会自动处理路径中的特殊字符，~`!@#$%<span></span>^&amp;*()-_+=<span></span>{}|\;:&quot;'&lt;&gt;,.? 以及空格，这些全部会被替换成 <code>-</code> <br />
 所以避免在设置中使用上述字符，否则可导致无法抓取到目录下的 <code>cover.jpg</code></p>
</blockquote>
</li>
<li>
<p>在 <code>&lt;root&gt;/source/_posts</code>  文件夹相应的目录里，存放封面图<br />
例子：如 <span class="exturl" data-url="aHR0cHM6Ly9zaG9rYS5sb3N0eXUubWUvY29tcHV0ZXItc2NpZW5jZS9qYXZhL2NvdXJzZS0xL3dlZWstMS8=">第 1 周 计算</span> 这篇文章。<br />
所处的分类是</p>
<figure class="highlight yml"><figcaption data-lang="YAML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">categories</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token punctuation">-</span> <span class="token punctuation">[</span>计算机科学<span class="token punctuation">,</span> Java<span class="token punctuation">,</span> 零基础学Java语言<span class="token punctuation">-</span>浙江大学<span class="token punctuation">-</span>翁恺<span class="token punctuation">]</span></pre></td></tr></table></figure><p>现在需要在首页显示 <code>零基础学Java语言-浙江大学-翁恺</code> 这个分类，翻转卡片后，显示这个分类下的文章们。<br />
而该分类经过英文映射，它的路径将是 <code>/computer-science/java/course-1/</code> 。</p>
<p>那么，请在 <code>&lt;root&gt;/source/_posts/computer-science/java/course-1/</code>  的目录下放置 <code>cover.jpg</code>  文件。<br />
只要 <code>分类路径</code> 对应的目录下<strong>存在</strong> <code>cover.jpg</code>  文件，这个分类就会在首页显示。<br />
在进行 <code>hexo g</code>  时，本分类的封面图会自动被复制到 public 目录里相应的位置。</p>
</li>
<li>
<p>事实上，为了方便文章管理，这个分类下所有文章的 md 文件，我都会放在 <code>&lt;root&gt;/source/_posts/computer-science/java/course-1/</code>  这个目录下。</p>
<p>且站点配置文件里，永久链接设置如下</p>
<figure class="highlight yml"><figcaption data-lang="YAML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">permalink</span><span class="token punctuation">:</span> <span class="token punctuation">:</span>title/</pre></td></tr></table></figure><p><code>hexo g</code>  后，文章的 html 文件们将全部生成到 <code>&lt;root&gt;/public/computer-science/java/course-1/</code>  目录。<br />
具体可以查看<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvc2hva2E=">本博客的 github 仓库</span>。</p>
</li>
<li>
<p>文章详情界面中的 <code>系列文章</code> ，显示的是与当前文章同一分类的其他文章，并按照文章名正序排序。</p>
</li>
</ol>
<blockquote>
<p>o (*￣▽￣*) ゞ<br />
其实，不设置 <code>category_map</code>  也可以，只要在分类路径对应的文件夹下存在 <code>cover.jpg</code>  文件就行。<br />
现在，这项功能与 <code>category_dir</code>  的配置也无关， <code>hexo g</code>  生成后，图片会自动被转移到 <code>category_dir</code>  的相关子目录下。</p>
</blockquote>
<h1 id="文章封面图"><a class="anchor" href="#文章封面图">#</a> 文章封面图</h1>
<ul>
<li>
<p>如果文章的 Front Matter 设置了 <code>cover: image path</code> ，则封面会显示这张图片。</p>
<figure class="highlight yml"><figcaption data-lang="YAML"><span>举个栗子</span></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">title</span><span class="token punctuation">:</span> Images</pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token key atrule">cover</span><span class="token punctuation">:</span> assets/wallpaper<span class="token punctuation">-</span>2572384.jpg</pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token comment"># 或者写成</span></pre></td></tr><tr><td data-num="4"></td><td><pre><span class="token key atrule">cover</span><span class="token punctuation">:</span> http<span class="token punctuation">:</span>//placehold.it/350x150.jpg</pre></td></tr><tr><td data-num="5"></td><td><pre><span class="token punctuation">---</span></pre></td></tr></table></figure><p>这里 <code>cover</code>  的值可以是位于 <code>source</code>  目录里的图片文件，此处是 <code>&lt;root&gt;/source/assets/wallpaper-2572384.jpg</code>  文件，也可以是一个某网址。</p>
</li>
<li>
<p>如果文章是一个 <code>gallery post</code> ，即 Front Matter 设置了 <code>photos</code> ，则会封面会显示设置的第一张图片。</p>
<figure class="highlight yml"><figcaption data-lang="YAML"><span>举个栗子</span></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token key atrule">title</span><span class="token punctuation">:</span> Gallery Post</pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token key atrule">photos</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="3"></td><td><pre><span class="token punctuation">-</span> assets/wallpaper<span class="token punctuation">-</span>2572384.jpg</pre></td></tr><tr><td data-num="4"></td><td><pre><span class="token punctuation">-</span> assets/wallpaper<span class="token punctuation">-</span>2311325.jpg</pre></td></tr><tr><td data-num="5"></td><td><pre><span class="token punctuation">-</span> assets/wallpaper<span class="token punctuation">-</span>878514.jpg</pre></td></tr><tr><td data-num="6"></td><td><pre><span class="token punctuation">-</span> http<span class="token punctuation">:</span>//placehold.it/350x150.jpg</pre></td></tr><tr><td data-num="7"></td><td><pre><span class="token punctuation">---</span></pre></td></tr></table></figure><p>此时默认会显示第一个图片，即位于 <code>&lt;root&gt;/source/assets/</code>  目录里的 <code>wallpaper-2572384.jpg</code> 。</p>
</li>
<li>
<p>如果站点配置中设置了 <code>post_asset_folder: true</code> ，那么上述本地图片路径应为 <code>&lt;root&gt;/source/_posts/文章同名的文件夹/assets/wallpaper-2572384.jpg</code> ，当然此时 <code>assets</code>  目录可以省掉。</p>
</li>
<li>
<p>如果以上设置均不存在，将显示一张随机图片，<a href="../config/#%E9%9A%8F%E6%9C%BA%E5%9B%BE%E5%BA%93">随机图库配置戳此</a>。</p>
</li>
</ul>
<h1 id="图片展示与相册"><a class="anchor" href="#图片展示与相册">#</a> 图片展示与相册</h1>
<p>在文章的 Front Matter 设置 <code>fancybox: false</code> ，可以关闭文章页的图片展示功能。<br />
使用<span class="exturl" data-url="aHR0cDovL21pcm9tYW5uaW5vLmdpdGh1Yi5pby9KdXN0aWZpZWQtR2FsbGVyeS8="> Justified-Gallery</span> 对 Gallery Post 内图案进行排列。</p>
<p>下面介绍一些小技巧：</p>
<ol>
<li>让图案下方显示 <code>title</code>  的 markdown 代码</li>
</ol>
<figure class="highlight raw"><figcaption data-lang=""></figcaption><table><tr><td data-num="1"></td><td><pre>![这里是 alt](https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;6833939bly1gicis081o9j20zk0m8dmr.jpg &quot;这里是 title&quot;)</pre></td></tr></table></figure><p><img data-src="https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg" alt="这里是alt" title="这里是title" /></p>
<ol start="2">
<li>除了在 Front Matter 里配置 <code>photos</code>  可以显示相册图案列表外，还可以这样写</li>
</ol>
<figure class="highlight raw"><figcaption data-lang=""></figcaption><table><tr><td data-num="1"></td><td><pre>## 图案列表 No.1</pre></td></tr><tr><td data-num="2"></td><td><pre>![](https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;6833939bly1giclfdu6exj20zk0m87hw.jpg &quot;这里是 title&quot;)</pre></td></tr><tr><td data-num="3"></td><td><pre>![](https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;6833939bly1giclflwv2aj20zk0m84qp.jpg)</pre></td></tr><tr><td data-num="4"></td><td><pre>![](https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;6833939bly1giclg5ms2rj20zk0m8u0x.jpg)</pre></td></tr><tr><td data-num="5"></td><td><pre>![](https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;6833939bly1giclhnx9glj20zk0m8npd.jpg)</pre></td></tr><tr><td data-num="6"></td><td><pre>&#123;.gallery&#125;</pre></td></tr><tr><td data-num="7"></td><td><pre></pre></td></tr><tr><td data-num="8"></td><td><pre>## 图案列表 No.2</pre></td></tr><tr><td data-num="9"></td><td><pre>![](https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;6833939bly1gicitht3xtj20zk0m8k5v.jpg)</pre></td></tr><tr><td data-num="10"></td><td><pre>![](https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;6833939bly1giclil3m4ej20zk0m8tn8.jpg)</pre></td></tr><tr><td data-num="11"></td><td><pre>![](https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;6833939bly1gicljgocqbj20zk0m8e81.jpg)</pre></td></tr><tr><td data-num="12"></td><td><pre>![](https:&#x2F;&#x2F;tva3.sinaimg.cn&#x2F;large&#x2F;6833939bly1gipetfk5zwj20zk0m8e81.jpg)</pre></td></tr><tr><td data-num="13"></td><td><pre>&#123;.gallery data-height&#x3D;&quot;220&quot;&#125;</pre></td></tr></table></figure><p><code>data-height</code>  用来设置每行的高度，默认为 <code>120</code></p>
<h2 id="图案列表no1"><a class="anchor" href="#图案列表no1">#</a> 图案列表 No.1</h2>
<p class="gallery"><img data-src="https://tva3.sinaimg.cn/large/6833939bly1giclfdu6exj20zk0m87hw.jpg" alt="" title="这里是title" /><br />
<img data-src="https://tva3.sinaimg.cn/large/6833939bly1giclflwv2aj20zk0m84qp.jpg" alt="" /><br />
<img data-src="https://tva3.sinaimg.cn/large/6833939bly1giclg5ms2rj20zk0m8u0x.jpg" alt="" /><br />
<img data-src="https://tva3.sinaimg.cn/large/6833939bly1giclhnx9glj20zk0m8npd.jpg" alt="" /></p>
<h2 id="图案列表no2"><a class="anchor" href="#图案列表no2">#</a> 图案列表 No.2</h2>
<p class="gallery" data-height="220"><img data-src="https://tva3.sinaimg.cn/large/6833939bly1gicitht3xtj20zk0m8k5v.jpg" alt="" /><br />
<img data-src="https://tva3.sinaimg.cn/large/6833939bly1giclil3m4ej20zk0m8tn8.jpg" alt="" /><br />
<img data-src="https://tva3.sinaimg.cn/large/6833939bly1gicljgocqbj20zk0m8e81.jpg" alt="" /><br />
<img data-src="https://tva3.sinaimg.cn/large/6833939bly1gipetfk5zwj20zk0m8e81.jpg" alt="" /></p>
<h1 id="自定义页面配色"><a class="anchor" href="#自定义页面配色">#</a> 自定义页面配色</h1>
<p>主题配色全部在 <code>&lt;root&gt;/themes/shoka/source/css/_colors.styl</code>  文件中，可以自行查看。</p>
<p>在 <code>&lt;root&gt;/source/_data/</code>  目录新建文件 <code>colors.styl</code> ，在此文件中添改样式。</p>
<blockquote>
<p>自定义 <code>colors.styl</code>  文件将覆盖主题默认样式，为了避免出错，请保证原有样式名均存在，在原有样式基础上进行增删改。</p>
</blockquote>
<p>主题支持在 <code>&lt;root&gt;/source/_data/</code>  目录建立三个自定义 <code>styl</code>  文件：</p>
<table>
<thead>
<tr>
<th>自定义文件名</th>
<th>对应默认样式文件</th>
<th>样式功能</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>colors.styl</code></td>
<td><code>_colors.styl</code></td>
<td>页面配色</td>
</tr>
<tr>
<td><code>iconfont.styl</code></td>
<td><code>_iconfont.styl</code></td>
<td><a href="../config/#iconfont%E5%9B%BE%E6%A0%87">图标样式</a></td>
</tr>
<tr>
<td><code>custom.styl</code></td>
<td>-</td>
<td>任意自定义样式</td>
</tr>
</tbody>
</table>
<h1 id="自定义主题图片"><a class="anchor" href="#自定义主题图片">#</a> 自定义主题图片</h1>
<p>如果想要修改主题的 <code>&lt;root&gt;/themes/shoka/source/images/</code>  目录内的某张图片，请在 <code>&lt;root&gt;/source/_data/</code>  目录新建目录 <code>images</code> ，并在这个文件夹中添加<ins>同名</ins>文件，部署时将自动覆盖主题内的默认图片。</p>
<p>可以用此方法自定义头像、打赏二维码等图片，并且避免覆盖更新主题时遗失自定义文件。</p>
<h1 id="自定义语言包"><a class="anchor" href="#自定义语言包">#</a> 自定义语言包</h1>
<p>本功能参考 NexT，主要可以用来定义菜单等处显示的文字，且可以方便主题无脑覆盖升级。</p>
<p>在 <code>&lt;root&gt;/source/_data/</code>  目录新建文件 <code>languages.yml</code> 。</p>
<p>按照以下格式添加配置项：</p>
<figure class="highlight yml"><figcaption data-lang="YAML"></figcaption><table><tr><td data-num="1"></td><td><pre><span class="token comment"># language</span></pre></td></tr><tr><td data-num="2"></td><td><pre><span class="token key atrule">zh-CN</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="3"></td><td><pre>  <span class="token comment"># items</span></pre></td></tr><tr><td data-num="4"></td><td><pre>  <span class="token key atrule">post</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="5"></td><td><pre>    <span class="token key atrule">copyright</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="6"></td><td><pre>      <span class="token comment"># the translation you perfer</span></pre></td></tr><tr><td data-num="7"></td><td><pre>      <span class="token key atrule">author</span><span class="token punctuation">:</span> 本文博主</pre></td></tr><tr><td data-num="8"></td><td><pre><span class="token key atrule">en</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="9"></td><td><pre>  <span class="token key atrule">menu</span><span class="token punctuation">:</span></pre></td></tr><tr><td data-num="10"></td><td><pre>    <span class="token key atrule">travellings</span><span class="token punctuation">:</span> Travellings</pre></td></tr></table></figure><p>可以参考主题目录下的 <code>example/source/_data</code>  文件夹。</p>
<blockquote>
<p>站点配置及文件的 Front Matter 中， <code>language</code>  项只支持 <code>zh-CN</code> 、 <code>zh-HK</code> 、 <code>zh-TW</code> 、 <code>ja</code> 、 <code>en</code> 。<br />
类似写成 <code>zh_CN</code>  这样是不可以的。</p>
</blockquote>

      <div class="tags">
          <a href="/tags/Hexo/" rel="tag"><i class="ic i-tag"></i> Hexo</a>
          <a href="/tags/%E6%95%99%E7%A8%8B/" rel="tag"><i class="ic i-tag"></i> 教程</a>
      </div>
  </div>

   <footer>

    <div class="meta">
  <span class="item">
    <span class="icon">
      <i class="ic i-calendar-check"></i>
    </span>
    <span class="text">更新于</span>
    <time title="修改时间：2020-11-11 04:12:45" itemprop="dateModified" datetime="2020-11-11T04:12:45+08:00">2020-11-11</time>
  </span>
</div>

      
<div class="reward">
  <button><i class="ic i-heartbeat"></i> 赞赏</button>
  <p>请我喝[茶]~(￣▽￣)~*</p>
  <div id="qr">
      
      <div>
        <img data-src="/images/wechatpay.png" alt="逸尘 微信支付">
        <p>微信支付</p>
      </div>
      
      <div>
        <img data-src="/images/alipay.png" alt="逸尘 支付宝">
        <p>支付宝</p>
      </div>
      
      <div>
        <img data-src="/images/paypal.png" alt="逸尘 贝宝">
        <p>贝宝</p>
      </div>
  </div>
</div>

      

<div id="copyright">
<ul>
  <li class="author">
    <strong>本文作者： </strong>逸尘 <i class="ic i-at"><em>@</em></i>逸尘
  </li>
  <li class="link">
    <strong>本文链接：</strong>
    <a href="https://yichenm.github.io.git/2020/08/13/computer-science/note/theme-shoka-doc/display/" title="Step.3 界面显示">https://yichenm.github.io.git/2020/08/13/computer-science/note/theme-shoka-doc/display/</a>
  </li>
  <li class="license">
    <strong>版权声明： </strong>本站所有文章除特别声明外，均采用 <span class="exturl" data-url="aHR0cHM6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL2xpY2Vuc2VzL2J5LW5jLXNhLzQuMC9kZWVkLnpo"><i class="ic i-creative-commons"><em>(CC)</em></i>BY-NC-SA</span> 许可协议。转载请注明出处！
  </li>
</ul>
</div>

  </footer>

</article>

  </div>
  

<div class="post-nav">
    <div class="item left">
      

  <a href="/2020/08/13/computer-science/note/theme-shoka-doc/config/" itemprop="url" rel="prev" data-background-image="https:&#x2F;&#x2F;tva1.sinaimg.cn&#x2F;mw690&#x2F;6833939bly1gicljgocqbj20zk0m8e81.jpg" title="Step.2 基本配置">
  <span class="type">上一篇</span>
  <span class="category"><i class="ic i-flag"></i> Theme Shoka Documentation</span>
  <h3>Step.2 基本配置</h3>
  </a>

    </div>
    <div class="item right">
      

  <a href="/2020/08/13/computer-science/note/theme-shoka-doc/special/" itemprop="url" rel="next" data-background-image="https:&#x2F;&#x2F;tva1.sinaimg.cn&#x2F;mw690&#x2F;6833939bly1giclxp31goj20zk0m8qv5.jpg" title="Step.4 主题特殊功能">
  <span class="type">下一篇</span>
  <span class="category"><i class="ic i-flag"></i> Theme Shoka Documentation</span>
  <h3>Step.4 主题特殊功能</h3>
  </a>

    </div>
</div>

  
  <div class="wrap" id="comments"></div>


        </div>
        <div id="sidebar">
          

<div class="inner">

  <div class="panels">
    <div class="inner">
      <div class="contents panel pjax" data-title="文章目录">
          <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%A6%96%E9%A1%B5%E7%BD%AE%E9%A1%B6%E6%96%87%E7%AB%A0"><span class="toc-number">1.</span> <span class="toc-text"> 首页置顶文章</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%A6%96%E9%A1%B5%E7%B2%BE%E9%80%89%E5%88%86%E7%B1%BB"><span class="toc-number">2.</span> <span class="toc-text"> 首页精选分类</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%87%E7%AB%A0%E5%B0%81%E9%9D%A2%E5%9B%BE"><span class="toc-number">3.</span> <span class="toc-text"> 文章封面图</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9B%BE%E7%89%87%E5%B1%95%E7%A4%BA%E4%B8%8E%E7%9B%B8%E5%86%8C"><span class="toc-number">4.</span> <span class="toc-text"> 图片展示与相册</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E6%A1%88%E5%88%97%E8%A1%A8no1"><span class="toc-number">4.1.</span> <span class="toc-text"> 图案列表 No.1</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%BE%E6%A1%88%E5%88%97%E8%A1%A8no2"><span class="toc-number">4.2.</span> <span class="toc-text"> 图案列表 No.2</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E9%9D%A2%E9%85%8D%E8%89%B2"><span class="toc-number">5.</span> <span class="toc-text"> 自定义页面配色</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E4%B8%BB%E9%A2%98%E5%9B%BE%E7%89%87"><span class="toc-number">6.</span> <span class="toc-text"> 自定义主题图片</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E8%A8%80%E5%8C%85"><span class="toc-number">7.</span> <span class="toc-text"> 自定义语言包</span></a></li></ol>
      </div>
      <div class="related panel pjax" data-title="系列文章">
        <ul>
          <li><a href="/2020/08/13/computer-science/note/theme-shoka-doc/" rel="bookmark" title="Hexo主题Shoka & multi-markdown-it渲染器使用说明">Hexo主题Shoka & multi-markdown-it渲染器使用说明</a></li><li><a href="/2020/08/13/computer-science/note/theme-shoka-doc/dependents/" rel="bookmark" title="Step.1 依赖插件">Step.1 依赖插件</a></li><li><a href="/2020/08/13/computer-science/note/theme-shoka-doc/config/" rel="bookmark" title="Step.2 基本配置">Step.2 基本配置</a></li><li class="active"><a href="/2020/08/13/computer-science/note/theme-shoka-doc/display/" rel="bookmark" title="Step.3 界面显示">Step.3 界面显示</a></li><li><a href="/2020/08/13/computer-science/note/theme-shoka-doc/special/" rel="bookmark" title="Step.4 主题特殊功能">Step.4 主题特殊功能</a></li>
        </ul>
      </div>
      <div class="overview panel" data-title="站点概览">
        <div class="author" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <img class="image" itemprop="image" alt="逸尘"
      data-src="/images/avatar.jpg">
  <p class="name" itemprop="name">逸尘</p>
  <div class="description" itemprop="description">专注于编程,分享生活,分享知识</div>
</div>

<nav class="state">
    <div class="item posts">
      <a href="/archives/">
        <span class="count">25</span>
        <span class="name">文章</span>
      </a>
    </div>
    <div class="item categories">
      <a href="/categories/">
        <span class="count">13</span>
        <span class="name">分类</span>
      </a>
    </div>
    <div class="item tags">
      <a href="/tags/">
        <span class="count">17</span>
        <span class="name">标签</span>
      </a>
    </div>
</nav>

<div class="social">
      <span class="exturl item github" data-url="aHR0cHM6Ly9naXRodWIuY29tL3lpY2hlbm0=" title="https:&#x2F;&#x2F;github.com&#x2F;yichenm"><i class="ic i-github"></i></span>
      <span class="exturl item twitter" data-url="aHR0cHM6Ly90d2l0dGVyLmNvbS95b3VybmFtZQ==" title="https:&#x2F;&#x2F;twitter.com&#x2F;yourname"><i class="ic i-twitter"></i></span>
      <span class="exturl item zhihu" data-url="aHR0cHM6Ly93d3cuemhpaHUuY29tL3Blb3BsZS95b3VybmFtZQ==" title="https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;yourname"><i class="ic i-zhihu"></i></span>
      <span class="exturl item music" data-url="aHR0cHM6Ly9tdXNpYy4xNjMuY29tLyMvdXNlci9ob21lP2lkPXlvdXJpZA==" title="https:&#x2F;&#x2F;music.163.com&#x2F;#&#x2F;user&#x2F;home?id&#x3D;yourid"><i class="ic i-cloud-music"></i></span>
      <span class="exturl item weibo" data-url="aHR0cHM6Ly93ZWliby5jb20veW91cm5hbWU=" title="https:&#x2F;&#x2F;weibo.com&#x2F;yourname"><i class="ic i-weibo"></i></span>
      <span class="exturl item qq" data-url="aHR0cDovL3dwYS5xcS5jb20vbXNncmQ/dj0zJnVpbj0xNjYwNTk3MzcwJnNpdGU9cXEmbWVudT15ZXM=" title="http:&#x2F;&#x2F;wpa.qq.com&#x2F;msgrd?v&#x3D;3&amp;uin&#x3D;1660597370&amp;site&#x3D;qq&amp;menu&#x3D;yes"><i class="ic i-qq"></i></span>
</div>

<ul class="menu">
  
    
  <li class="item">
    <a href="/" rel="section"><i class="ic i-home"></i>首页</a>
  </li>

    
  <li class="item">
    <a href="/about/" rel="section"><i class="ic i-user"></i>关于</a>
  </li>

    
  <li class="item">
    <a href="/friends/" rel="section"><i class="ic i-heart"></i>友達</a>
  </li>

    
  <li class="item">
    <a href="/links/" rel="section"><i class="ic i-magic"></i>链接</a>
  </li>

    
  <li class="item">
    <a href="/musics/" rel="section"><i class="ic i-music"></i>音乐</a>
  </li>

    
  <li class="item">
    <a href="/movies/" rel="section"><i class="ic i-sakura"></i>视频</a>
  </li>

        
  <li class="item dropdown">
      <a href="javascript:void(0);"><i class="ic i-feather"></i>文章</a>
    <ul class="submenu">

        
  <li class="item">
    <a href="/archives/" rel="section"><i class="ic i-list-alt"></i>归档</a>
  </li>

        
  <li class="item">
    <a href="/categories/" rel="section"><i class="ic i-th"></i>分类</a>
  </li>

        
  <li class="item">
    <a href="/tags/" rel="section"><i class="ic i-tags"></i>标签</a>
  </li>

  </ul>

</ul>

      </div>
    </div>
  </div>

  <ul id="quick">
    <li class="prev pjax">
        <a href="/2020/08/13/computer-science/note/theme-shoka-doc/config/" rel="prev" title="上一篇"><i class="ic i-chevron-left"></i></a>
    </li>
    <li class="up"><i class="ic i-arrow-up"></i></li>
    <li class="down"><i class="ic i-arrow-down"></i></li>
    <li class="next pjax">
        <a href="/2020/08/13/computer-science/note/theme-shoka-doc/special/" rel="next" title="下一篇"><i class="ic i-chevron-right"></i></a>
    </li>
    <li class="percent"></li>
  </ul>
</div>


        </div>
        <div class="dimmer"></div>
      </div>
    </main>
    <footer id="footer">
      <div class="inner">
        <div class="widgets">
          
<div class="rpost pjax">
  <h2>随机文章</h2>
  <ul>
      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2019/07/25/blog/code-highlight/" title="Code Highlight Style test">Code Highlight Style test</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/computer-science/" title="分类于 计算机科学">计算机科学</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/note/" title="分类于 二进制杂谈">二进制杂谈</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/note/Theme-Shoka-Documentation/" title="分类于 Theme Shoka Documentation">Theme Shoka Documentation</a>
</div>

    <span><a href="/2020/08/13/computer-science/note/theme-shoka-doc/dependents/" title="Step.1 依赖插件">Step.1 依赖插件</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><a href="/2013/12/25/blog/excerpts/" title="Excerpts">Excerpts</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/computer-science/" title="分类于 计算机科学">计算机科学</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/note/" title="分类于 二进制杂谈">二进制杂谈</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/note/Theme-Shoka-Documentation/" title="分类于 Theme Shoka Documentation">Theme Shoka Documentation</a>
</div>

    <span><a href="/2020/08/13/computer-science/note/theme-shoka-doc/" title="Hexo主题Shoka &amp; multi-markdown-it渲染器使用说明">Hexo主题Shoka & multi-markdown-it渲染器使用说明</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/blog/" title="分类于 博客篇">博客篇</a>
</div>

    <span><a href="/2021/05/24/computer-science/note/Blog/" title="个人博客搭建">个人博客搭建</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/blog/" title="分类于 博客篇">博客篇</a>
</div>

    <span><a href="/2020/03/15/blog/PicGo-GitHub/" title="PicGo+GitHub 图床搭建">PicGo+GitHub 图床搭建</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/computer-science/" title="分类于 计算机科学">计算机科学</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/java/" title="分类于 Java">Java</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/java/%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%AD%A6Java%E8%AF%AD%E8%A8%80/" title="分类于 零基础学Java语言-">零基础学Java语言-</a>
</div>

    <span><a href="/2020/04/12/computer-science/java/course-1/week-1/" title="第1周 计算">第1周 计算</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/computer-science/" title="分类于 计算机科学">计算机科学</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/note/" title="分类于 二进制杂谈">二进制杂谈</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/note/Theme-Shoka-Documentation/" title="分类于 Theme Shoka Documentation">Theme Shoka Documentation</a>
</div>

    <span><a href="/2020/08/13/computer-science/note/theme-shoka-doc/display/" title="Step.3 界面显示">Step.3 界面显示</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
<a href="/categories/computer-science/" title="分类于 计算机科学">计算机科学</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/java/" title="分类于 Java">Java</a>
<i class="ic i-angle-right"></i>
<a href="/categories/computer-science/java/course-1/" title="分类于 零基础学Java语言">零基础学Java语言</a>
</div>

    <span><a href="/2020/04/13/computer-science/java/course-1/week-2/" title="第2周 判断">第2周 判断</a></span>
  </li>

      
  <li class="item">
    
<div class="breadcrumb">
</div>

    <span><span class="exturl" data-url="aHR0cDovL3d3dy5nb29nbGUuY29tLw==" title="www.google.com">www.google.com<i class="ic i-link-alt"></i></span></span>
  </li>

  </ul>
</div>
<div>
  <h2>最新评论</h2>
  <ul class="leancloud-recent-comment"></ul>
</div>

        </div>
        <div class="status">
  <div class="copyright">
    
    &copy; 2020 – 
    <span itemprop="copyrightYear">2022</span>
    <span class="with-love">
      <i class="ic i-sakura rotate"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">逸尘 @ Yi Chen</span>
    
  </div>
  <div class="powered-by">
    基于 <span class="exturl" data-url="aHR0cHM6Ly9oZXhvLmlv">Hexo</span> & Theme.<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2FtZWhpbWUvaGV4by10aGVtZS1zaG9rYQ==">Shoka</span>
  </div>
  <div>
  <img src="https://static.dy208.cn/o_1dfilp8ruo521thr1hvf18ji17soa.png" style="display:inline-block" />
    <a href="https://beian.miit.gov.cn/"  style="color:#808080" target="_blank">鄂ICP备2021014555号-1</a>
  <div/>
</div>

      </div>
    </footer>
  </div>
<script data-config type="text/javascript">
  var LOCAL = {
    path: '2020/08/13/computer-science/note/theme-shoka-doc/display/',
    favicon: {
      show: "（●´3｀●）やれやれだぜ",
      hide: "(´Д｀)大変だ！"
    },
    search : {
      placeholder: "文章搜索",
      empty: "关于 「 ${query} 」，什么也没搜到",
      stats: "${time} ms 内找到 ${hits} 条结果"
    },
    valine: {"placeholder":"1. 提问前请先仔细阅读本文档⚡\n2. 页面显示问题💥，请提供控制台截图📸或者您的测试网址\n3. 其他任何报错💣，请提供详细描述和截图📸，祝食用愉快💪"},fancybox: true,copyright: '复制成功，转载请遵守 <i class="ic i-creative-commons"></i>BY-NC-SA 协议。',
    ignores : [
      function(uri) {
        return uri.includes('#');
      },
      function(uri) {
        return new RegExp(LOCAL.path+"$").test(uri);
      }
    ]
  };
</script>

<script src="https://cdn.polyfill.io/v2/polyfill.js"></script>

<script src="//cdn.jsdelivr.net/combine/npm/pace-js@1.0.2/pace.min.js,npm/pjax@0.2.8/pjax.min.js,npm/whatwg-fetch@3.4.0/dist/fetch.umd.min.js,npm/animejs@3.2.0/lib/anime.min.js,npm/algoliasearch@4/dist/algoliasearch-lite.umd.js,npm/instantsearch.js@4/dist/instantsearch.production.min.js,npm/lozad@1/dist/lozad.min.js,npm/quicklink@2/dist/quicklink.umd.js"></script>

<script src="/js/app.js?v=0.2.5"></script>




</body>
</html>
